<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="HandheldFriendly" content="true"/>

  <title>REST Diagram iink</title>

  <link rel="stylesheet" href="../../examples.css">
  <link rel="stylesheet" href="diagram.css"/>

  <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
  <script type="text/javascript" src="../../../dist/iink.min.js"></script>

</head>

<body>
<div id="progress"></div>
<nav>
  <div class="nav-group">
    <button id="clear" class="nav-btn btn-fab-mini btn-lightBlue" disabled>
      <img src="../../assets/img/clear.svg">
    </button>
    <button id="undo" class="nav-btn btn-fab-mini btn-lightBlue" disabled>
      <img src="../../assets/img/undo.svg">
    </button>
    <button id="redo" class="nav-btn btn-fab-mini btn-lightBlue" disabled>
      <img src="../../assets/img/redo.svg">
    </button>
  </div>
    <div class="nav-group" style="margin-left: auto">
    <div id="preview-container">
      <div id="preview-btn" class="classic-btn">
        <img src="../../assets/img/document.svg">
        <span>Preview</span>
      </div>
      <div id="edit-btn" class="classic-btn" style="display: none;">
        <img src="../../assets/img/edit.svg">
        <span>Edit</span>
      </div>
    </div>
  </div>
</nav>
<div id="editor" touch-action="none">
  <svg id="converted-svg"></svg>
</div>
<script>
  const editButton = document.getElementById('edit-btn');
  const previewButton = document.getElementById('preview-btn');

  const editorElement = document.getElementById('editor');
  const undoElement = document.getElementById('undo');
  const redoElement = document.getElementById('redo');
  const clearElement = document.getElementById('clear');
  const progressElement = document.getElementById('progress');

  let exports = '';
  let firstChanged = true;
  let undoRedoClearChanged = false;
  let isPreview = false;

  function launchLoader() {
    progressElement.style.transition = ' width 10s';
    progressElement.style.opacity = '1';
    progressElement.style.width = `${editorElement.clientWidth / 2}px`;
  }

  editorElement.addEventListener('changed', event => {
    undoElement.disabled = !event.detail.canUndo;
    redoElement.disabled = !event.detail.canRedo;
    undoRedoClearChanged = false;
    firstChanged = false;
  });

  editorElement.addEventListener('exported', evt => {
    exports = evt.detail.exports;
    if (exports && exports['image/svg+xml']) {
      progressElement.style.transition = ' width 0.3s';
      progressElement.style.width = `${editorElement.clientWidth}px`;
      setTimeout(() => {
        progressElement.style.opacity = '0';
        progressElement.style.width = '0';
      }, 300);
      clearElement.disabled = false;
      const divSvgElement = document.createElement('div');
      divSvgElement.innerHTML = exports['image/svg+xml'].trim();
      const svgElement = divSvgElement.firstChild;
      svgElement.id = 'converted-svg';
      svgElement.setAttribute('width', editorElement.clientWidth);
      svgElement.setAttribute('height', editorElement.clientHeight);
      svgElement.setAttribute('viewBox', `0 0 ${editorElement.clientWidth / 3.77953} ${editorElement.clientHeight / 3.77953}`);
      if (document.getElementById('converted-svg')) {
        document.getElementById('converted-svg')
          .remove();
      }
      editorElement.appendChild(svgElement);
      manageEditMode(previewButton, false);
    } else {
      clearElement.disabled = true;
    }
  });

  undoElement.addEventListener('click', () => {
    undoRedoClearChanged = true;
    editorElement.editor.undo();
  });
  redoElement.addEventListener('click', () => {
    undoRedoClearChanged = true;
    editorElement.editor.redo();
  });

  clearElement.addEventListener('click', () => {
    undoRedoClearChanged = true;
    editorElement.editor.clear();
    manageEmptySvg();
  });

  previewButton.addEventListener('click', () => {
    isPreview = true;
    previewButton.style.display = 'none';
    editButton.style.display = 'flex';
    manageEditMode(this, true);
  });

  editButton.addEventListener('click', () => {
    isPreview = false;
    editButton.style.display = 'none';
    previewButton.style.display = 'flex';
    manageEditMode(this, false);
  });

  function manageEmptySvg() {
    if (document.getElementById('converted-svg')) {
      document.getElementById('converted-svg')
        .remove();
    }
    const emptySvgElement = document.createElement('svg');
    emptySvgElement.id = 'converted-svg';
    editorElement.appendChild(emptySvgElement);
  }

  function manageEditMode(element, withExport) {
    if (withExport && isPreview && editorElement.editor.model.rawStrokes.length > 0) {
      editorElement.editor.export_(['image/svg+xml', 'application/vnd.openxmlformats-officedocument.presentationml.presentation']);
      launchLoader();
    } else if (editorElement.editor.model.rawStrokes.length === 0) {
      manageEmptySvg();
    }
    const convertedSvg = document.getElementById('converted-svg');
    const canvasRendering = document.querySelector('.ms-rendering-canvas.ms-canvas');
    const canvasCapture = document.querySelector('.ms-capture-canvas.ms-canvas');
    if (!isPreview) {
      convertedSvg.style.visibility = 'hidden';
      canvasRendering.style.display = 'initial';
      canvasCapture.style.display = 'initial';
      editorElement.style.pointerEvents = 'initial';
    } else {
      convertedSvg.style.visibility = 'visible';
      canvasRendering.style.display = 'none';
      canvasCapture.style.display = 'none';
      editorElement.style.pointerEvents = 'none';
    }
  }

  /**
   * Attach an editor to the document
   * @param {Element} The DOM element to attach the ink paper
   * @param {Object} The recognition parameters
   */
  iink.register(editorElement, {
    restConversionState: 'DIGITAL_EDIT',
    triggers: {
      exportContent: 'DEMAND'
    },
    recognitionParams: {
      type: 'DIAGRAM',
      protocol: 'REST',
      server: {
        scheme: 'https',
        host: 'webdemoapi.myscript.com',
        applicationKey: '515131ab-35fa-411c-bb4d-3917e00faf60',
        hmacKey: '54b2ca8a-6752-469d-87dd-553bb450e9ad'
      },
      iink: {
        diagram: {
          mimeTypes: ['image/svg+xml', 'application/vnd.openxmlformats-officedocument.presentationml.presentation'],
        }
      }
    }
  });

  window.addEventListener('resize', () => {
    editorElement.editor.resize();
  });
</script>
</body>

</html>